<template>
  <div class="leaveManger">
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="goBackHandle"
      @click-right="goSetting"
      :fixed="true"
      :border="false"
      :safe-area-inset-top="true"
      style="padding-top: 0px"
    >
      <!-- <template #right>
        <van-icon name="setting" size="18" color="#000" />
      </template> -->
    </van-nav-bar>
    <div class="boxFlex">
      <div class="dataContent">
        <!-- <div class="contentTop"></div> -->
        <van-form>
          <van-field
            readonly
            clickable
            name="部门"
            label="部门"
            placeholder="请选择部门"
            v-model="deptDate"
            @click="clickDept"
            right-icon="arrow-down"
            input-align="right"
            :disabled="userRole == 1 || deptArr.length == 1"
          >
            <!-- <template #extra>
            <van-icon class="extra" name="arrow-down" size="18" />
          </template> -->
          </van-field>
          <van-field
            readonly
            clickable
            border
            name="请假时间"
            :label="returTtitle()"
            placeholder="请选择时间"
            v-model="askOffDate"
            input-align="right"
            @click="clickShowCalendar"
            right-icon="arrow-down"
          >
          </van-field>
          <div style="display: flex">
            <van-field
              style="margin-right: 10px"
              v-model="applyStatus"
              readonly
              clickable
              name="审批状态"
              label="审批状态"
              placeholder="请选择"
              @click="clickApplyStatus"
              right-icon="arrow-down"
              input-align="right"
            >
            </van-field>
            <van-field
              class="applicant"
              autocomplete="off"
              name="申请人"
              label="申请人"
              placeholder="请输入申请人"
              v-model="applicantName"
              clearable
              input-align="right"
            />
          </div>
        </van-form>
        <div style="display: flex">
          <van-button
            class="exportBtn sendEmail"
            @click="clickSendEmail"
            v-if="userRole == 2"
            >发送到邮箱</van-button
          ><van-button class="exportBtn" @click="clickQuery">查询</van-button>
        </div>
      </div>
      <div class="tb">
        <div class="tb-title">
          <van-col class="tb-cell" :span="5">审批状态</van-col>
          <van-col class="tb-cell" :span="7">申请人和部门</van-col>
          <van-col v-if="title == '假期管理'" class="tb-cell" :span="8"
            >请假时间</van-col
          >
          <van-col v-if="title == '加班管理'" class="tb-cell" :span="8"
            >加班时间</van-col
          >
          <van-col v-if="title == '漏打卡管理'" class="tb-cell" :span="8"
            >起止时间</van-col
          >
          <van-col
            v-if="title == '假期管理'"
            class="tb-cell"
            :span="4"
            style="text-align: left"
            >请假时长</van-col
          >
          <van-col
            v-if="title == '加班管理'"
            class="tb-cell"
            :span="4"
            style="text-align: left"
            >加班时长</van-col
          >
        </div>
        <div class="divBox">
          <van-pull-refresh
            v-model="refreshing"
            @refresh="onRefresh"
            :disabled="scrollTop > 0"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="applyDataNo ? '' : '没有更多了'"
              @load="onLoad"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              :immediate-check="false"
              id="List"
              ref="List"
            >
              <div class="noData" v-if="applyDataNo">
                <img :src="require('../../assets/noData.png')" alt="" />
                <div>暂无数据</div>
              </div>
              <div
                class="tb-row"
                v-for="(item, index) in askOffList"
                :key="index"
                @touchstart="onTouchStart(item, index)"
                @touchend="onTouchEnd(item, index)"
              >
                <van-row @click="clickGo(item)">
                  <van-col class="tb-cell" :span="5">{{
                    item.StatusName
                  }}</van-col>
                  <van-col class="tb-cell" :span="7">
                    <div>{{ item.ApplicantName }}</div>
                    <div>{{ item.DeptName }}</div></van-col
                  >
                  <van-col
                    v-if="title == '假期管理'"
                    class="tb-cell"
                    :span="8"
                    style="font-size: 13px"
                    >{{ item.StartDate }} 至 {{ item.EndDate }}</van-col
                  >
                  <van-col
                    v-if="title == '加班管理'"
                    class="tb-cell"
                    :span="8"
                    style="font-size: 12px"
                    >{{ item.StartDate }} 至 {{ item.EndDate }}</van-col
                  >
                  <van-col
                    v-if="title == '漏打卡管理'"
                    class="tb-cell"
                    :span="8"
                    style="font-size: 12px"
                    >{{ item.StartDate }} 至 {{ item.EndDate }}</van-col
                  >
                  <van-col
                    v-if="title == '假期管理'"
                    class="tb-cell"
                    :span="4"
                    style="text-align: right"
                    >{{ item.Duration }}天</van-col
                  >
                  <van-col
                    v-if="title == '加班管理'"
                    class="tb-cell"
                    :span="4"
                    style="text-align: right"
                    >{{ item.Duration }}小时</van-col
                  >
                </van-row>
                <div
                  class="tb-cellDel"
                  v-if="
                    isShowDelete &&
                    showDeleteIndex == index &&
                    item.Status !== 2
                  "
                >
                  <!-- <van-col :offset="20" :span="4"> -->
                  <span class="btn-del" @click="deleteItem(index)">删除</span>
                  <!-- </van-col> -->
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
    <van-calendar
      color="#006dff"
      v-model="showCalendar"
      :allow-same-day="true"
      type="range"
      @confirm="onConfirm"
      :min-date="minDate"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="statusNameArr"
        value-key="Type"
        :default-index="0"
        @confirm="onConfirmPicker"
        @cancel="showPicker = false"
      />
    </van-popup>
    <van-dialog
      v-model="showDialog"
      title="提示信息"
      message="确定要删除吗"
      show-cancel-button
      @confirm="confirmDialog"
      confirm-button-color="#006dff"
    />
    <van-popup
      v-model="showCheckboxGroup"
      title="标题"
      position="bottom"
      :style="{ height: '45%' }"
    >
      <div class="buttonDiv">
        <div @click="clickBtn(1)">取消</div>
        <div @click="clickBtn(2)">确认</div>
      </div>
      <van-checkbox-group v-model="checkDeptDeptId">
        <van-checkbox
          v-for="(item, index) in deptArr"
          :key="item.DeptId"
          shape="square"
          icon-size="16px"
          :name="item.DeptId"
          ref="checkBoxs"
          @click="clickCheckbox(item)"
          >{{ item.DeptName }}</van-checkbox
        >
      </van-checkbox-group>
    </van-popup>
  </div>
</template>
<script>
import { SuccesFN, FailFN } from '@/DceMessage'
import backMixin from '@/backMixin'
import KeepAliveMixin from '@/KeepAliveMixin'
export default {
  name: 'leaveManger',
  mixins: [backMixin, KeepAliveMixin],
  data() {
    return {
      minDate: new Date(`${new Date().getFullYear() - 50}/01/01`),
      scrollTop: 0,
      showCheckboxGroup: false,
      applyStatus: '全部', //审批状态
      showPicker: false,
      askOffDate: '', //表单项的请假时间
      startDate: '', //表单项的开始时间
      endDate: '', //表单项的结束时间
      loading: false, // 是否处在加载状态
      finished: false, // 是否已加载完成
      error: false, // 是否加载失败
      isLongpress: false,
      isShowDelete: false,
      showDeleteIndex: '',
      startTime: 0,
      page: 1, // 分页
      // page_size: 10, // 每页条数
      statusNameArr: [], //状态数组
      showCalendar: false, //是否展示日历组件
      showDialog: false, //是否展示弹窗
      askOffList: [], //表格数据
      title: '', //标题
      deptArr: [], //部门数组
      checked: false, //复选框默认不选中
      deptDate: '', //表单项部门回显
      deptIdDate: '', //选中的部门id
      checkDept: [], //选中的部门数组
      applicantName: '', //申请人名称
      applicantIdForm: '', //申请人Id
      clickQueryIf: false, //判断是否点击了查询按钮
      clickDeleteItem: {}, //点击要删除的对象
      checkDeptDeptId: [], //复选框v-model绑定的数组
      email: '', //从缓存中获取当前登录的id
      list: [], //空数组用来分页
      total: '', //接口返回的总数量
      refreshing: false, //是否下拉刷新
      appType: '', //申请类型
      applyDataNo: false,
      askOffDataPage: [],
      askOffListFilter: [],
      startDateDate: '',
      endDateDate: '',
      applicationType: '',
      userRole: '', //当前登录用户的权限
      deptId: '' //当前登录用户所在部门
    }
  },
  created() {
    this.title = this.$route.params.ApplicantType
    //从缓存中获取当前登录的id
    this.email = JSON.parse(
      window.localStorage.getItem('attendance-records')
    ).email
    this.deptId = JSON.parse(
      window.localStorage.getItem('attendance-records')
    ).deptId
    //从缓存中获取当前登录的权限
    this.userRole = JSON.parse(
      window.localStorage.getItem('attendance-records')
    ).role
    // 获取部门信息
    this.getManagement()
    //从缓存中获取状态并过滤掉草稿，Id为0
    let all = { Id: '', Type: '全部' }
    this.statusNameArr = JSON.parse(
      localStorage.getItem('attendance-records_status')
    ).filter(item => item.Id !== 0)
    // 往状态数组添加全部选项
    this.statusNameArr.unshift(all)
    if (this.title == '假期管理') {
      this.appType = 2
    }else if (this.title == '漏打卡管理') {
      this.appType = 3
    }else {
      this.appType = 1
    }
  },
  mounted() {
    this.$nextTick(() => {
      let _this = this
      document
        .querySelector('#List')
        .addEventListener('touchmove', _this.tableMove)
    })
  },
  beforeRouteEnter(to, from, next) {
    if (from.name == 'workbenchDetail') {
      next(vm => {
        vm.getList()
      })
    }
    next()
  },
  methods: {
    returTtitle(){
      if(this.title == '加班管理') {
        return '加班时间'
      }if(this.title == '漏打卡管理') {
        return '起止时间'
      }else{
        return '请假时间'
      }
    },
    //移动监听
    tableMove() {
      this.scrollTop = this.$refs.List.$el.scrollTop
    },
    // 点击发送到邮箱
    clickSendEmail() {
      // 选中的状态Id
      let status = this.statusNameArr.filter(
        item => item.Type == this.applyStatus
      )[0].Id
      this.$axios({
        url: '/attendance-api/application-export',
        method: 'POST',
        data: {
          deptId: this.deptIdDate,
          applicantId: this.applicantIdForm,
          status: status,
          startDate: this.startDate,
          endDate: this.endDate,
          mail: this.email,
          appType: this.appType
        }
      }).then(res => {
        if (res) {
          SuccesFN(res.data.Message)
        }
      })
    },
    // 点击设置按钮
    goSetting() {
      console.log('点击设置按钮')
      this.$router.push({
        name: 'settingPage'
      })
    },
    // 点击复选框
    clickCheckbox(val) {
      console.log(val)
      console.log(this.deptArr)
      let checkdepid = this.checkDeptDeptId.filter(item => item === val.DeptId)

      if (checkdepid.length > 0) {
        this.checkDept.push(val)
      } else {
        this.checkDept = this.checkDept.filter(it => it.DeptId !== val.DeptId)
      }
      console.log(
        'checkDeptDeptId////////',
        this.checkDeptDeptId,
        checkdepid,
        this.checkDept
      )
    },
    clickBtn(val) {
      if (val == 1) {
        this.showCheckboxGroup = false
      } else if (val == 2) {
        this.showCheckboxGroup = false
        this.deptIdDate = this.checkDept.map(item => item.DeptId).toString()
        console.log(this.deptIdDate)
        this.deptDate = this.checkDept.map(item => item.DeptName).toString()
        console.log(this.deptDate)
      }
    },
    // 点击部门
    clickDept() {
      if (!this.userRole == 1 || this.deptArr.length !== 1) {
        this.showCheckboxGroup = true
      }
    },
    // 获取部门信息
    async getManagement() {
      await this.$axios({
        url: '/attendance-api/department-query-list',
        method: 'get',
        params: {
          pageSize: 0,
          page: 1
        }
      }).then(res => {
        console.log(res)
        let temp = res.data.Object.List
        let tempDept = window.localStorage.getItem('attendance-records')
        let tempDeptId = JSON.parse(tempDept).deptId
        let arr = []
        // 如果部门是-1 那么就是全部
        if (tempDeptId == '1615586587184205824') {
          arr = temp.filter(item => {
            return item.DeptId != tempDeptId
          })
        } else {
          arr = temp.filter(item => {
            return item.DeptId == tempDeptId
          })
        }
        this.deptArr = arr.map(item => {
          return { DeptId: item.DeptId, DeptName: item.DeptName }
        })

        if (this.deptArr.length == 1) {
          // 如果只有一个部门，下拉框自动选中
          this.deptIdDate = this.deptArr[0].DeptId.toString()
          this.deptDate = this.deptArr[0].DeptName.toString()
        }
        this.getList()
        console.log(this.deptArr)
        if (this.userRole == 1) {
          this.deptDate = this.deptArr.map(
            item => item.DeptId == this.deptId
          )[0].DeptName
          console.log(this.deptDate)
        }
      })
    },
    // 点击查询按钮
    clickQuery() {
      // 是否点击了查询按钮
      this.clickQueryIf = true
      // 是否显示删除按钮
      this.isShowDelete = false
      if (this.applicantName) {
        this.getMemberList()
      } else {
        this.getList()
      }
    },
    getMemberList() {
      // 从员工列表接口里得到员工id
      this.$axios({
        url: '/attendance-api/employee-query-list',
        method: 'get',
        params: {
          pageSize: 0,
          page: 1,
          deptId: this.deptIdDate
        }
      }).then(res => {
        console.log(res)
        let arr = []
        if (this.applicantName) {
          arr = res.data.Object.List.filter(
            item => item.Name == this.applicantName
          )
          console.log(arr)
          // 如果有该员工，申请人提交参数就提交输入的申请人Id
          if (arr.length > 0) {
            console.log('buweikong')
            this.applicantIdForm = arr.map(item => item.Id).toString()
            console.log(this.applicantIdForm)
            if (!this.applicantIdForm) {
              this.applicantIdForm = '111'
            }
          } else {
            console.log(this.applicantName)
            // 如果没有该员工，申请人提交参数就提交输入的申请人名称
            // if (this.applicantName) {
            this.applicantIdForm = '111'
            // } else {
            //   this.applicantIdForm = '111'
            // }
          }
        } else {
          console.log('888888888')
          this.applicantName = ''
          this.applicantIdForm = ''
        }
        this.$nextTick(() => {
          this.getList()
        })
      })
    },
    // 点击日历的确定按钮
    onConfirm(date) {
      console.log(date)
      const [start, end] = date
      this.showCalendar = false
      console.log(start)
      let StartDate = new Date(start)
      let EndDate = new Date(end)
      let sm = StartDate.getMonth() + 1
      sm < 10 ? (sm = '0' + sm) : sm
      let em = EndDate.getMonth() + 1
      em < 10 ? (em = '0' + em) : em
      let sd = StartDate.getDate()
      sd < 10 ? (sd = '0' + sd) : sd
      let ed = EndDate.getDate()
      ed < 10 ? (ed = '0' + ed) : ed
      this.startDate = `${StartDate.getFullYear()}-${sm}-${sd}`
      this.endDate = `${EndDate.getFullYear()}-${em}-${ed}`
      this.askOffDate = this.startDate + ' 至 ' + this.endDate
    },
    // 点击请假时间表单
    clickShowCalendar() {
      this.showCalendar = true
    },
    // 点击审批状态
    clickApplyStatus() {
      this.showPicker = true
    },
    // 点击picker的确定按钮
    onConfirmPicker(value) {
      console.log(value)
      this.applyStatus = value.Type
      this.showPicker = false
    },
    // 获取请假列表数据
    getList() {
      if (this.title == '假期管理') {
        this.applicationType = 2
      }else if (this.title == '漏打卡管理') {
        this.applicationType = 3
      } else {
        this.applicationType = 1
      }
      console.log(this.applicationType)
      if (this.userRole == 1) {
        this.deptIdDate = this.deptId
      }
      // 选中的状态Id
      let status = this.statusNameArr.filter(
        item => item.Type == this.applyStatus
      )[0].Id
      // this.askOffList = []
      console.log(this.clickQueryIf)
      console.log(this.page)
      if (this.startDate) {
        this.startDateDate = this.startDate + ' ' + '08:00:00'
      }
      if (this.endDate) {
        this.endDateDate = this.endDate + ' ' + '17:00:00'
      }

      this.$axios({
        url: '/attendance-api/application-query-list',
        method: 'get',
        params: {
          deptId: this.deptIdDate,
          applicantId: this.applicantName ? this.applicantIdForm : '',
          status: status,
          startDate: this.startDateDate,
          endDate: this.endDateDate,
          pageSize: 0,
          page: 1,
          applicationType: this.applicationType
        }
      }).then(res => {
        this.refreshing = false
        if (res) {
          // 过滤掉草稿
          if (res.data.Object.List) {
            this.askOffListFilter = res.data.Object.List.filter(
              item => item.Status !== 0
            )
          } else {
            this.askOffListFilter = []
            // this.loading = false
            // console.log(this.loading)
            this.applyDataNo = true
            this.finished = true
          }
          this.total = res.data.Object.Total
          if (this.askOffListFilter) {
            // this.applyDataNo = false
            // this.finished = true
            if (this.applicationType == 1) {
              // 加班
              this.askOffListFilter.forEach((value, index) => {
                // 日期格式转换
                let StartDate = new Date(value.StartDate)
                let EndDate = new Date(value.EndDate)
                let sm = StartDate.getMonth() + 1
                sm < 10 ? (sm = '0' + sm) : sm
                let em = EndDate.getMonth() + 1
                em < 10 ? (em = '0' + em) : em
                let sd = StartDate.getDate()
                sd < 10 ? (sd = '0' + sd) : sd
                let ed = EndDate.getDate()
                ed < 10 ? (ed = '0' + ed) : ed
                let sh = StartDate.getHours()
                sh < 10 ? (sh = '0' + sh) : sh
                let eh = EndDate.getHours()
                eh < 10 ? (eh = '0' + eh) : eh
                let sMinute = StartDate.getMinutes()
                sMinute < 10 ? (sMinute = '0' + sMinute) : sMinute
                let eMinute = EndDate.getMinutes()
                eMinute < 10 ? (eMinute = '0' + eMinute) : eMinute
                value.StartDate = `${StartDate.getFullYear()}-${sm}-${sd} ${sh}:${sMinute}`
                value.EndDate = `${EndDate.getFullYear()}-${em}-${ed} ${eh}:${eMinute}`
                // 往数组的对象中添加状态名StatusName
                for (var i = 0; i < this.statusNameArr.length; i++) {
                  if (value.Status == this.statusNameArr[i].Id) {
                    value['StatusName'] = this.statusNameArr[i].Type
                  }
                }
              })
            } else {
              this.askOffListFilter.forEach((value, index) => {
                // 日期格式转换
                let StartDate = new Date(value.StartDate)
                let EndDate = new Date(value.EndDate)
                let sm = StartDate.getMonth() + 1
                sm < 10 ? (sm = '0' + sm) : sm
                let em = EndDate.getMonth() + 1
                em < 10 ? (em = '0' + em) : em
                let sd = StartDate.getDate()
                sd < 10 ? (sd = '0' + sd) : sd
                let ed = EndDate.getDate()
                ed < 10 ? (ed = '0' + ed) : ed
                let sh = StartDate.getHours() //得到小时
                let eh = EndDate.getHours()
                StartDate = `${StartDate.getFullYear()}-${sm}-${sd}`
                EndDate = `${EndDate.getFullYear()}-${em}-${ed}`
                if (sh == 8 || sh < 13) {
                  value.StartDate = StartDate + ' ' + '上午'
                } else if (sh == 13 || sh > 13) {
                  value.StartDate = StartDate + ' ' + '下午'
                }
                if (eh == 8 || eh < 13) {
                  value.EndDate = EndDate + ' ' + '上午'
                } else if (eh == 13 || eh > 13) {
                  value.EndDate = EndDate + ' ' + '下午'
                }
                // 往数组的对象中添加状态名StatusName
                for (var i = 0; i < this.statusNameArr.length; i++) {
                  if (value.Status == this.statusNameArr[i].Id) {
                    value['StatusName'] = this.statusNameArr[i].Type
                  }
                }
              })
            }
            console.log(this.askOffListFilter)
            // let askOffList = this.askOffListFilter
            this.askOffDataPage = this.pagearr(this.askOffListFilter)
            console.log(this.askOffDataPage)
            this.askOffList = this.askOffDataPage.shift()
            console.log(this.askOffList)
            if (this.askOffListFilter.length == 0) {
              this.applyDataNo = true
            } else {
              this.applyDataNo = false
            }
            if (this.askOffListFilter.length == this.askOffList.length) {
              this.applyDataNo = false
              this.finished = true
            }
          } else {
            this.askOffList = []
            this.applyDataNo = true
            this.finished = true
          }
        } else {
          this.askOffList = []
          this.applyDataNo = true
          this.finished = true
        }
      })
    },
    //设置一页几条数据
    pagearr(arr, num = 10) {
      let arrList = []
      for (var i = 0; i < arr.length; i += num) {
        arrList.push(arr.slice(i, Math.min(i + num, arr.length)))
      }
      console.log('rrrrrr>>>>>>>>>>>>>', arrList)
      return arrList
    },
    // 被 @load调用的方法
    onLoad() {
      if (this.askOffList == []) {
        this.loading = false
        this.finished = false
        return
      }
      if (this.askOffDataPage == []) {
        this.loading = false
        this.finished = true
        return
      }
      // 异步更新数据
      setTimeout(() => {
        // 加载状态结束
        console.log(this.askOffDataPage)
        if (this.askOffDataPage.length != 0) {
          this.askOffList.push(...this.askOffDataPage.shift())
          this.loading = false
        } else {
          this.loading = false
          this.finished = true
        }
      }, 1000)
    },
    onRefresh() {
      this.isShowDelete = false
      this.$refs.List.$el.scrollTop = 0
      this.scrollTop = 0
      this.loading = false
      this.finished = false
      this.askOffDataPage = []
      this.getList()
    },
    // 点击返回按钮
    goBackHandle() {
      this.$router.go(-1)
    },
    onTouchStart(item, index, e) {
      this.startTime = new Date().getTime()
      // Toast(e.timeStamp)
      this.isLongpress = true
    },
    onTouchEnd(item, index, e) {
      const duration = new Date().getTime() - this.startTime
      if (duration >= 600) {
        // 触发长按删除操作
        if (this.isShowDelete && this.showDeleteIndex == index) {
          return
        } else {
          this.isShowDelete = true
          this.showDeleteIndex = index
        }
      }
    },
    // 点击删除按钮
    deleteItem(index) {
      console.log(index)
      this.clickDeleteItem = this.askOffList[index]
      console.log(this.clickDeleteItem)
      // this.isLongpress = false
      // this.$delete(this.list, index)
      // 显示dialog弹窗
      this.showDialog = true
    },
    // 点击弹窗的确定按钮
    confirmDialog() {
      // 调删除接口
      this.$axios({
        // url: '/attendance-api/vacation-approve',
        url: '/attendance-api/application-approve',
        method: 'POST',
        data: {
          // vacationId: this.clickDeleteItem.Id,
          applicationId: this.clickDeleteItem.Id,
          approverId: this.id,
          status: 2
        }
      }).then(res => {
        if (res) {
          SuccesFN(res.data.Message)
          this.getList()
        }
      })
    },
    // 点击表格跳转页面
    clickGo(val) {
      if (this.isShowDelete) {
        this.isShowDelete = false
        return
      }
      if (this.title == '假期管理') {
        this.$router.push({
          name: 'workbenchDetail',
          params: { ApplicantType: '请假', leaveManger: { data: val } }
        })
      } else if (this.title == '加班管理') {
        this.$router.push({
          name: 'workbenchDetail',
          params: { ApplicantType: '加班', leaveManger: { data: val } }
        })
      } else if (this.title == '漏打卡管理') {
        this.$router.push({
          name: 'workbenchDetail',
          params: { ApplicantType: '漏打卡', leaveManger: { data: val } }
        })
      }

      console.log('点击跳转页面')
    }
  }
}
</script>

<style lang="less" scoped>
.leaveManger:deep {
  margin: 0;
  padding: 0;
  height: 100%;

  display: flex;
  flex-direction: column;
  .van-nav-bar {
    z-index: 999;
  }
  .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  .van-nav-bar__content {
    .van-nav-bar__title {
      font-size: 18px;
    }
  }
  .buttonDiv {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    height: 44px;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 100;
    div {
      padding: 0 16px;
      font-size: 14px;
      background-color: transparent;
      border: none;
      cursor: pointer;
      color: #576b95;
      &:first-child {
        color: #969799;
      }
    }
  }
  .van-checkbox-group {
    .van-checkbox {
      padding: 12px 16px;
    }
  }
  .noData {
    width: 343px;
    font-size: 13px;
    color: #999999;
    background: #fff;
    border-radius: 9px;
    margin: 0 auto;
    padding-top: 50px;
    text-align: center;
    img {
      width: 254px;
      height: 290px;
      display: block;
      margin: 0 auto;
    }
    div {
      margin-top: -50px;
    }
  }

  .dataContent {
    padding: 10px 16px;
    background-color: #fff;
    margin-top: 46px;
    z-index: 998;
    .van-field {
      padding: 0 0 0 0;
      margin-bottom: 10px;
      line-height: 36px;
      .van-field__label {
        width: 60px;
      }
      .van-field__value {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 0 5px;
      }
    }
    .van-field:last-child {
      .van-field__label {
        width: 45px;
      }
    }
    .van-icon-arrow-down:before {
      color: black;
      font-size: 16px;
    }
    .exportBtn {
      width: 100%;
      border-radius: 10px;
      border: 0;
      font-size: 16px;
      flex: 1;
    }
    .van-button:last-child {
      background-color: #006dff;
      color: #fff;
    }
    .sendEmail {
      margin-right: 16px;
      background: #e3efff;
      color: #006dff;
    }
  }
  .van-calendar__footer {
    .van-calendar__confirm {
      height: 44px;
      font-size: 16px;
      border-radius: 10px;
      margin: 10px 0;
    }
  }
  .van-cell::after {
    border: 0;
  }
  .boxFlex {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .tb {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    text-align: left;
    font-size: 14px;

    overflow: hidden;
    .tb-title {
      // position: sticky;
      // top: 292px;
      height: 40px;
      line-height: 40px;
      background: #ddd;
      padding: 0 10px;
      border-top: 1px solid #ccc;
      z-index: 998;
      .tb-cell {
        height: 100%;
        line-height: 40px;
      }
    }
    .divBox {
      flex: 1;
      overflow: auto;
    }
    .tb-row {
      // height: auto;
      font-size: 13px;
      padding: 0 10px;
      &:nth-child(even) {
        background-color: #f5f5f5;
      }
      &:nth-child(odd) {
        background-color: #fff;
      }
      .tb-cell {
        height: auto;
        line-height: 40px;
        // border-left: 1px solid #ccc;
        padding: 0 2px;
        white-space: normal;
        word-break: break-all;
        &:first-child {
          border-left: 0;
        }
      }
    }

    .tb-cellDel {
      height: 40px;
      line-height: 40px;
      text-align: right;
      .btn-del {
        vertical-align: middle;
        color: red;
      }
    }
  }
}
</style>
